<template>
  <div class="container-y">
      <div class="box-list">
        <div class="list">
            <p class="text-title">课程详情 <span class="btn-go" @click="goTiaoke">{{yanshiText}}</span></p>
            <div class="showimg">
               <div class="imgbox">
                   <img :src="teacherphoto" alt="">
               </div>
            </div>
            <p class="name">{{teacherName}}</p>
            <p class="time-y">{{yyr}}  {{time}}</p>
        </div>
        <div class="middle">
            <p class="text-pdw">发送“Hi，my uid is {{verificationCode}}”给外教，
方便老师找到您</p>
           <div class="btn-code" @click="getCode">+获取老师二维码</div>
           <div class="code-box" v-if="code">
               <img :src="qrCodePath" alt="">
           </div>
        </div>
        <div class="bottom">
            <p class="class-notes">教材内容</p>
            <div class="text" v-html="value"></div>
        </div>
  
        <div class="box" v-show="show">
            <div class="box-lists" >
                <div class="textall">请选择时间段</div>
                <div class="timelist">
                    <div class="time-table" v-for="(choosetab,index) in listtime" :key="index">
                    <div class="tab-item" @click="chooseTime(choosetab.itemcode,choosetab.itemvalue)" :class="{'active': choosetab.itemcode === itemcode}" >{{choosetab.itemvalue}}</div>
                </div>
                </div>
                
            </div>
        </div>

      </div>
      <datetime class="all" v-model="minuteListValue" format="YYYY-MM-DD HH:mm" :minute-list="['00', '15', '30', '45']" @on-change="change" ></datetime>
    
  </div>
</template>
<script>
import TimeChoose from "./timechoose"
import { Datetime, Group} from 'vux'
export default {
  components: {
    Datetime,
    Group,
    TimeChoose
  },
    data(){
    return{
          list:"",
          describe:"",
          teacherName:"",
          yyr:'',
          time:"",
          teacherphoto:'',
          verificationCode:"",
          qrCodePath:"",
          code:false,
          value:"",
          minuteListValue:'',
          startDate:"",
          text:'请选择时间',
          valueTIme:"",
          timeSlot:'',
          yanshiText:"申请调课",
         listtime:"",
         itemcode:"",
         show:false,
         itemValue:''
      }
  },
   mounted(){
     this.getINformation()
     this.getClassText()
     this.setToday () 
      this. gettimeSlot()
  },
  created(){
   
  },
  methods:{
      change(){

      },
       gettimeSlot(){
         this.$axios.post('http://www.chenyekeji.com/bsti-rbac/wechat/getTimeSlot')
          .then((res) => {
             console.log(res)
              this.listtime=res.data.data
               
          })
      },
      chooseTime(itemcode,itemValue){
         this.itemcode=itemcode
         this.show=false
         this.itemValue=itemValue
           this.submit()
   },
     setToday () { //今天时间
      let now = new Date()
      let cmonth = now.getMonth() + 1
      let day = now.getDate()
      if (cmonth < 10) cmonth = '0' + cmonth
      if (day < 10) day = '0' + day
      this.startDate = now.getFullYear() + '-' + cmonth + '-' + day
    },
      compare(data){
        if(data==true){
            var d = new Date();  
          var str = d.getFullYear()+"-"+(d.getMonth()+1)+"-"+d.getDate()
          if (Date.parse(str.replace(/\-/g, "\/"))<=Date.parse(this.yyr.replace(/\-/g, "\/"))) {//年月日对比 
             var hours=d.getHours()
             var classDay=this.time.slice(0,2)
             if(Date.parse(str.replace(/\-/g, "\/"))==Date.parse(this.yyr.replace(/\-/g, "\/"))){//小时对比
                 if(hours+7<=classDay){
                        this.chooseData()
                 }else{
                     this.extend()
                 }
             }else{
                  this.chooseData()
             }   
          }else{
             this.extend()
          }
        }  
     },
     chooseData(){
         let self=this
         this.$vux.datetime.show({
        cancelText: '取消',
        confirmText: '确定',
        clearText:"选择延课时间",
        format: 'YYYY-MM-DD',
        startDate:this.startDate,
        onConfirm (val) {
          self.valueTIme=val
          self.show=true
        
        },
        onShow () {
          console.log('plugin show')
        },
        onHide () {
          console.log('plugin hide')
        }
      })
     },
     submit(){
        let self=this
        console.log(self.valueTIme)
        this.$vux.confirm.show({
        title: '申请调课',
        content: "<div class='yanke'>延课时间:"+self.valueTIme +" "+self.itemValue+"</div>"+'<div class="textare"><textarea class="textareatext" id="textas" placeholder="请填写申请理由" @change="change"></textarea></div>',
        onShow () {
          console.log('promt show')
        },
        onConfirm (msg) {
          self.submitInfor()
        }
      })
     },
     submitInfor(){
         let inp=document.getElementById("textas");  
          this.describe=inp.value
          let self=this
          let data={
            aferDate:self.valueTIme, //选的年月日
            describe:this.describe,       //备注
            aferTime:this.itemcode,   //选的时间
            tft_id:this.$route.query.tid   //备注课程id
         }
         console.log(data)
          this.$axios.get('http://www.chenyekeji.com/bsti-rbac/wechat/shenQingTiaoKe',{
              params:data
          })
          .then((res) => {
             console.log("444"+res)
              this.$vux.alert.show({
                    title: '已提交',
                    content: "您的调课申请已经提交，我们会在24小时内处理，如遇教师时间冲突，可能会与您进行电话沟通。谢谢",
                    onShow () {
                        console.log('Plugin: I\'m showing')
                    },
                    onHide () {
                    }
                })
          })
     },
     extend(){  //弹窗
        this.$vux.alert.show({
          title: 'Sorry',
          content: "请至少提前7小时申请延课",
          onShow () {
            console.log('Plugin: I\'m showing')
          },
          onHide () {
          }
       })
     },
      goTiaoke(){
          var _this=this
        this.$axios.post('http://www.chenyekeji.com/bsti-rbac/wechat/tiaokeCheck?tft_id='+this.$route.query.tid)
          .then((res) => {
              console.log(res)
              if(res.data.data==false){
                  this.$vux.alert.show({
                    title: 'Sorry',
                    content: "每次课程申请延可次数最多为2次，您已超过2次",
                    onShow () {
                        console.log('Plugin: I\'m showing')
                    },
                    onHide () {
                    }
                })
              }else{
                  _this.compare(res.data.data)
              }
              
          })
         
          
      },
      getClassText(){
        this.$axios.post('http://www.chenyekeji.com/bsti-rbac/wechat/getCourseWareVo?tid='+this.$route.query.tid)
          .then((res) => {
              console.log(res)
               if(res.data.data==""){
                   this.value="等待老师上传"
               }else{
                  this.value=res.data.data[0].courseWareContent
               }
          })
      },
      getCode(){
        this.code==false?this.code=true:this.code=false
      },
      getINformation(){
           this.$axios.post('http://www.chenyekeji.com/bsti-rbac/wechat/getOrder?userId='+this.$route.query.userId)
          .then((res) => {
              console.log(res)
              this.list=res.data.data
              this.teacherName=res.data.data[this.$route.query.bid].teachName
              this.teacherphoto=res.data.data[this.$route.query.bid].wechatPortrait
              this.qrCodePath=res.data.data[this.$route.query.bid].qrCodePath
              this.timeSlot=res.data.data[this.$route.query.bid].timeSlot
              this.verificationCode=res.data.data[this.$route.query.bid].verificationCode
              this.yyr=res.data.data[this.$route.query.bid].itemFreeTimes[this.$route.query.id].freeDate
              this.time=res.data.data[this.$route.query.bid].itemFreeTimes[this.$route.query.id].freeTime
            })
       },
      gobackend(order){
          this.$axios.post('http://www.chenyekeji.com/bsti-rbac/wechat/refundApply?orderNum='+order+"&describe="+this.describe)
          .then((res) => {
             console.log(res)
          })
      }
  }
}
</script>
<style scoped>
.time-table .active{
   background:#ff3434;
   color: #fff;
}
.time-table{
    display: flex;
    
    justify-content: center;
}
.timelist{
  height:500px;
  padding-top:20px;
  overflow: auto;
}
.tab-item{
    width:300px;
    height: 60px;
    line-height: 60px;
    margin-bottom:20px;
    border-bottom:1px solid #e0e0e0;
    color: #ff8181;
   font-size: 28px;
}
  .box{
      height: 100%;
      width:100%;
     position: fixed;
    z-index: 1000;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
  }
  .box-lists{
    height: 60%;
    width: 80%;
    overflow: auto;
    padding: 80px 30px;
    background: #fff;
    margin: 38% auto;
  }
  .textall{
    height: 60px;
    line-height: 60px;
    font-size: 28px;

  }
.all{
    display: none;
}
.text{
    font-size:24px;
}
.class-notes{
   line-height: 80px;
   text-align: left;
   color: #999;
   font-size:28px;
   position: relative;
   padding-left:20px;
}
.class-notes::after{
    content: "";
    position: absolute;
    height: 100%;
    height: 12px;
    width: 12px;
    border-radius: 100%;
    background: #ff0000;
    left:0;
    top:32px;
}
.middle{
    border-bottom: 2px solid #e4e4e4;
}
.code-box{
    height: 380px;
    width: 500px;
    margin:30px auto;
}
.code-box img{
    height: 100%;
    width: 100%;
}
.btn-code{
   margin:20px 100px;
  line-height: 88px;
  text-align: center;
  font-size: 27px;
  color:#ff0000;
  border: 1px solid #ff0000;
  border-radius: 10px;
}
.text-pdw{
    padding:20px 100px;
    line-height: 50px;
    text-align: center;
    font-size: 29px;
    color: #222222;
}
.time-y{
    text-align: center;
    padding-top:50px;
    color: #444;
    font-size: 28px;
    padding-bottom: 20px;
    border-bottom: 2px solid #e4e4e4;
}
.name{
    font-size: 33px;
    color: #333333;
    padding-top:16px;
}
.showimg{
   padding-top:30px;
}
.imgbox{
    height: 100px;
    width: 100px;
    margin:0 auto;
    border-radius: 100%;
    border: 1px solid #fba7a7;
    overflow: hidden;
}
.imgbox img{
    width: 100%;
    min-height: 100%;
    min-width:100%;
}
.btn-go{
    width:161px;
    height:48px;
    line-height: 48px;
    font-size: 28px;
    text-align: center;
    margin-top:20px;
    border-radius: 4px;
    background: #ff3434;
    color: #fff;
    float: right;
}
  .container-y{
      height: 100%;
      width:100%;
      background: #f4f4f4;
      position: relative;
      display: flex;
      box-sizing: border-box;
  }
  .box-list{
      background: #fff;
      flex:1;
      padding:0 30px;
      border-radius: 10px;
  }
  .text-title{
      line-height: 82px;
      height: 82px;
      text-align: left;
      font-size: 28px;
      padding-left:20px;
      color: #333333;
      position: relative;
  }
  .text-title:after{
      position: absolute;
      content: "";
      left:0;
      height: 30px;
      border-radius: 4px;
      width: 8px;
      background: #ff3434;
      top:26px;
  }
  .text{
      text-align: left;
  }
</style>




